<template>
  <!-- 主页面布局 - 包含侧边栏和主内容区 -->
  <!-- <div class="layout">  </div> -->
    <el-container >
      <!-- 侧边导航菜单 -->
      <Sidebar :isCollapse="isCollapse" @toggle-collapse="toggleSidebar" />
      <!-- 右侧主内容区 - 包含顶部导航和主内容 -->
      <el-container direction="vertical">
          <!-- 顶部导航栏 -->
          <Navbar />
          <!-- 主内容区域 -->
            <el-main style="margin: 0;">
              <RouterView></RouterView>
            </el-main>
      </el-container>
    </el-container>

</template>

<script setup>
import { ref } from 'vue';
// 导入侧边栏和顶部导航组件
import Sidebar from '@/components/Sidebar.vue';
import Navbar from '@/components/Navbar.vue';

// 侧边栏折叠状态管理
const isCollapse = ref(false);

// 切换侧边栏折叠状态的方法
const toggleSidebar = () => {
  isCollapse.value = !isCollapse.value;
};

// 路由信息
// const route = useRoute();
// 判断是否为登录或注册页面(不区分大小写)
// const isAuthPage = computed(() => 
//   route.path.toLowerCase() === '/login' || route.path.toLowerCase() === '/register'
// );
</script>

<style scoped>
.el-container {
  height: 100%;
}

/* 移除默认边距 */
* {
  margin: 0;
  padding: 0;
}

/* 侧边栏样式 */
:deep(.el-aside) {
  transition: width 0.3s ease;
}

/* 主页面布局样式 */
.layout {
  display: flex;
  /* width: 100vw; */
  /* height: 100vh; */
}
</style>